<template>
	<view>
		<view class="header_search">
			<uni-easyinput prefixIcon="search" placeholder="请输入患者姓名或者手机号" @input="changeSearch">
			</uni-easyinput>
		</view>

		<view class="main">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" style-type="text" :active-color="activeColor"
					@clickItem="onClickItem" />
			</view>
		</view>
		<view class="content">
			<view>
				<view class="_rows" v-for="(item,index) in _data.rowData" :key="index">
					<view class="_b" style="display: flex; justify-content: left;align-items: center;">
						<view class="_icons"
							:style="item.gender === '1' ? 'background-color: #409eff;' : 'background-color: #f95757;'">
							<image :src="item.gender === '1' ? '../../../static/ns.png' : '../../../static/nvs.png'"
								mode=""></image>
						</view>
						<view style="margin-left: 8rpx;">{{item.name}}</view>
					</view>

					<view class="_b" style="display: flex; justify-content: left;align-items: center;">
						<view class="tag-view">
							<uni-tag :text="item.pattern" type="success" size="small" />
						</view>
						<view style="margin-left: 8rpx;">
							{{item.age}}
						</view>
					</view>

					<view class="_b" style="color: red;">
						￥{{item.receivable}}
					</view>

					<view class="_b" style="text-align: center;" v-if="_data.params.state !== 4">
						<button v-if="_data.params.state === 1" type="primary" size="mini">收费</button>
						<button v-if="_data.params.state === 2" type="default" style="background-color: #f3a73f; color: #ffffff;" size="mini">补交</button>
						<button v-if="_data.params.state === 3" type="warn" size="mini">退费</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		getCharge,
		getPostDetail
	} from "./request.js"
	
	import {
		onReachBottom,
	} from '@dcloudio/uni-app';
	const items = ref(['待收费', '欠费', '已收费', '已退费'])
	const current = ref(0)




	const _data = reactive({
		params: {
			current: 1,
			size: 10,
			searchKey: "",
			state: 1,
		},
		rowData: [],
	})

	const onClickItem = (e) => {
		console.log(e.currentIndex);
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex
			_data.params.state = e.currentIndex + 1

			getList()
		}
	}

	const getList = () => {
		getCharge(_data.params).then(res => {
			_data.rowData = res.data.records.map((it) => {
				it.receivable = it.receivable.toFixed(2)
				return it
			})
		})
	}
	getList()
	
	
	onReachBottom((e) => {
		_data.params.current += 1
		getList()
	})

	const changeSearch = (e) => {
		_data.params.searchKey = e
		getList()
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.main {
		background-color: #ffffff;
	}


	.content {
		margin-top: 20rpx;

		._rows {
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12rpx;
			margin: 6rpx 0;

			._b {
				width: 20%;

				._icons {
					background-color: #409eff;

					width: 42rpx;
					height: 42rpx;
					border-radius: 50%;
					padding: 6rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 38rpx;
						height: 38rpx;
						vertical-align: middle;
					}

				}
			}

		}
	}

	.header_search {
		padding: 40rpx 16rpx;
		background-color: #ffffff;
	}
</style>